@import "@/common/styles/colors"

.home-page
  display: flex
  flex-direction: column
  height: 100vh
  position: relative
  overflow-x: hidden

  .info-area
    user-select: none
    pointer-events: none
    display: flex
    align-items: center
    gap: 1rem
    padding: 5rem

    img
      width: 5.5rem
      height: 5.5rem

    h1
      font-size: 2.5rem

    h2
      font-size: 1.3rem

    h1, h2
      margin: 0


.interface-image
  margin-left: 30vw
  margin-top: 16vh
  animation: fadeIn 1s ease-in-out
  z-index: 0

  img
    width: 61vw
    transform: rotate(12deg)
    pointer-events: none
    user-select: none

.flying-icons
  position: absolute
  transform: rotate(-25deg)
  display: flex
  gap: 1rem
  animation: spawn 1s ease-in-out

  svg
    font-size: 4vh
    animation: flyAround 16s linear infinite

.flying-icons:nth-child(2)
  top: 70%
  left: 10%

.flying-icons:nth-child(3)
  top: 30%
  right: 10%

.flying-icons:nth-child(4)
  bottom: 50%
  left: 12%

.flying-icons:nth-child(5)
  top: 25%
  right: 25%

.flying-icons:nth-child(6)
  bottom: 30%
  left: 20%


@keyframes fadeIn
  from
    transform: translateY(10rem)
    opacity: 0
  to
    transform: translateY(0)
    opacity: 1

@keyframes spawn
  from
    transform: rotate(-25deg) scale(0.2)
    opacity: 0
  to
    transform: rotate(-25deg)
    opacity: 1

@keyframes flyAround
  0%, 100%
    transform: translate(0, 0)

  25%
    transform: translate(0.5rem, -0.5rem)

  50%
    transform: translate(-0.5rem, 0.5rem)

  75%
    transform: translate(-0.5rem, -0.5rem)


@media screen and (max-width: 1800px)
  .flying-icons:nth-child(6)
    display: none

@media screen and (max-width: 1650px)
  .flying-icons:nth-child(4)
    display: none
  .flying-icons:nth-child(2)
    display: none

@media screen and (max-width: 1250px)
  .interface-image
    margin-left: 20vw
    margin-top: 10vh

@media screen and (max-width: 1000px)
  .flying-icons:nth-child(3)
    display: none
  .flying-icons:nth-child(5)
    right: 10rem
    top: 20rem

@media screen and (max-width: 500px)
  .flying-icons:nth-child(5)
    right: 5rem
    top: 15rem